<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <h1>
        dynamicImage/index.html
    </h1>

    This example shows how to integrate dynamically generated images with cornerstone.  A dynamic image generator
    is one that can produce new images on the client side.  This could be used to do image fusion as well as
    MPR or Volume Rendering.

    <br>
    <br>

    <button id="opacity25" class="btn">Opacity .25</button>
    <button id="opacity75" class="btn">Opacity .75</button>

    <br>
    <br>

    <div id="dicomImage" style="width:512px;height:512px"
         oncontextmenu="return false"
         onmousedown="return false">
    </div>

</div>
</body>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>
<script>window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')</script>

<script>
    function getPixelData() {
        const width = 256;
        const height = 256;
        const numPixels = width * height;
        const pixelData = new Uint16Array(numPixels);
        let index = 0;
        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                pixelData[index] = ((x) % 256) * this.data.opacity;
                index++;
            }
        }

        return pixelData;
    }

    const dynamicImage = {
        imageId: "notneeded",
        minPixelValue: 0,
        maxPixelValue: 255,
        slope: 1.0,
        intercept: 0,
        windowCenter: 127,
        windowWidth: 256,
        render: cornerstone.renderGrayscaleImage,
        getPixelData: getPixelData,
        rows: 256,
        columns: 256,
        height: 256,
        width: 256,
        color: false,
        columnPixelSpacing: 1.0,
        rowPixelSpacing: 1.0,
        invert: false,
        sizeInBytes: 256 * 256 * 2,
        data: {
            opacity: 0.5
        }
     };

    // image enable the element
    const element = document.getElementById('dicomImage');
    cornerstone.enable(element);
    cornerstone.displayImage(element, dynamicImage);

    document.getElementById('opacity25').addEventListener('click', function () {
        dynamicImage.data.opacity = .25;
        cornerstone.updateImage(element, true);
    });

    document.getElementById('opacity75').addEventListener('click', function () {
        dynamicImage.data.opacity = .75;
        cornerstone.updateImage(element, true);
    });
</script>
</html>
